<script setup lang="ts">
function parseString(inputStr:any) {
  const pattern = /(\[\d+(?:\|\d+)*\])|(-)/g
  const matches = inputStr.match(pattern)
  const result = []

  for (let match of matches) {
    if (match === '-') {
      result.push(1)
    } else {
      const numbers = match.slice(1, -1).split('|').map(Number)
      // const divs = numbers.map((width) => ({ count, width }))
      result.push(numbers.length === 1 ? numbers[0] : numbers)
    }
  }

  return result
}

const inputStr = '-[5|3|2]--[3|1]'
const result = parseString(inputStr)
console.log(result)
</script>

<template>
  <template v-for="(item, index) in result" :key="index">
    <div v-if="!Array.isArray(item)" class="out"></div>
    <div class="container" v-else>
      <div
        class="item"
        v-for="(inner, i) in item"
        :key="i"
        :style="{ flex: inner }"
      ></div>
    </div>
  </template>
</template>

<style lang="scss" scoped>
.out {
  height: 50px;
  margin: 10px;
  border: 1px solid #000;
}
.container {
  display: flex;
  justify-content: space-between;
  height: 50px;
}

.item {
  flex: 1;
  height: 50px;
  border: 1px solid #000;
  margin: 0 10px 0 10px;
}
</style>
